import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom/client";

// class Hello extends React.Component {
//   state = {
//     count: 0,
//   };

//   componentDidMount() {
//     // 写副作用
//     this.timer = setInterval(() => {
//       console.log("Hello - 计时");
//       this.setState((prevState) => {
//         return {
//           count: prevState.count + 1,
//         };
//       });
//     }, 1000);
//   }

//   componentWillUnmount() {
//     clearInterval(this.timer);
//   }

//   render() {
//     return (
//       <div>
//         <h1>Hello - {this.state.count}</h1>
//       </div>
//     );
//   }
// }

// class App extends React.Component {
//   state = {
//     isShowHello: true,
//   };

//   render() {
//     return (
//       <div>
//         <h1>App</h1>
//         <button
//           onClick={() => {
//             this.setState(() => ({ isShowHello: false }));
//           }}
//         >
//           卸载Hello组件
//         </button>
//         {this.state.isShowHello && <Hello />}
//       </div>
//     );
//   }
// }

function Hello() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      console.log("Hello - 计时");
      setCount((prveCount) => prveCount + 1);
    }, 1000);

    return () => {
      // 这个函数，就能模拟 componentWillUnmount 的效果
      console.log("Hello - 卸载");

      clearInterval(timer);
    };
  }, []);

  return (
    <div>
      <h1>Hello - {count}</h1>
    </div>
  );
}

function App() {
  const [isShowHello, setIsShowHello] = useState(true);

  return (
    <div>
      <h1>App</h1>
      <button
        onClick={() => {
          setIsShowHello(false);
        }}
      >
        卸载Hello组件
      </button>
      {isShowHello && <Hello />}
    </div>
  );
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);

/**
 * 函数式组件中如何实现 componentWillUnmount 的效果
 *
 *    useEffect 的第一个参数，再返回一个函数，
 */
